<template>
    <div class="enterprise-search">
        <div class="search">
            <el-input placeholder="请输入内容" v-model="queryParams.mouhu" class="input-with-select">
                <el-button @click="searchKey" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="condition">
            <div class="area" v-for="(item, index) in area" :key="index">
                <div class="header">
                    <span style="width:400px">{{ item.label }}</span>
                    <span class="all" style="width:200px;height:30px" :class="[item.active && 'active']" @click="queryAllData(item,index)">全部</span>
                </div>
                <div class="box">
                    <div class="block" :class="[ i == item.listIndex && 'active']" @click="querySubData(item, subItem,index,i)" v-for="(subItem, i) in item.list" :key="i">{{ subItem.label }}</div>
                </div>
            </div>
        </div>
        <div class="total">
            已为你找到
            <span>{{ total }}</span> 条相关数据
        </div>
        <div class="table">
            <table-block :oprData="oprData" :pageSize="queryParams.size" :total="total" height="400" @cellClick="cellClick" @currentChange="currentChange" :currePage="queryParams.current"></table-block>
        </div>
    </div>
</template>

<script>
import {
    getCommonDataSearch,
    getCommonDataSearchCondition
} from "@/api/pages.js";
export default {
    data() {
        return {
            queryCity: '',
            queryParams: {
                mouhu: "",
                qyqx: "-1",
                qylb: "-1",
                clzb: "-1",
                clsj: "-1",
                cylb: "-1",
                current: 1,
                size: 10
            },
            oprData: {},
            //pageIndex: 1,
            total: 0,
            area: [
                {
                    label: "区县",
                    active: true,
                    value: -1,
                    key: "qyqx",
                    listIndex: -1,
                    list: []
                },
                {
                    label: "注册资本",
                    value: -1,
                    active: true,
                    key: "clzb",
                    listIndex: -1,
                    list: [
                        { label: "0～100万", value: 1 },
                        { label: "100～200万", value: 2 },
                        { label: "200～500万", value: 3 },
                        { label: "500～1000万", value: 4 },
                        { label: "1000～2000万", value: 5 },
                        { label: "2000万以上", value: 6 }
                    ]
                },
                {
                    label: "成立时间",
                    active: true,
                    value: -1,
                    key: "clsj",
                    listIndex: -1,
                    list: [
                        { label: "成立1年内", value: 1 },
                        { label: "成立1~5年", value: 2 },
                        { label: "成立5~10年", value: 3 },
                        { label: "成立10~15年", value: 4 },
                        { label: "成立15年以上", value: 5 }
                    ]
                },
                {
                    label: "行业分类",
                    active: true,
                    key: "cylb",
                    value: -1,
                    listIndex: -1,
                    list: [
                        { label: "一产", value: "一产" },
                        { label: "二产", value: "二产" },
                        { label: "三产", value: "三产" }
                    ]
                },
                {
                    label: "企业类别",
                    active: true,
                    key: "qylb",
                    value: -1,
                    listIndex: -1,
                    list: [
                        { label: "上市企业", value: "上市企业" },
                        { label: "高新企业", value: "高新企业" },
                        { label: "四上企业", value: "四上企业" }
                    ]
                }
            ],
            active: "全部"
            //   qx:['万州区','黔江区','涪陵区','秀山县','酉阳县','彭水县','忠县','云阳县','奉节县','巫山县','巫溪县','石柱县','垫江县','大渡口区'],
            //   zczb:['0～100万','100～200万','200 ～500万','500～1000万','1000 ～2000万','2000万以上'],
            //   clsj:['成立1年内',' 成立1~5年','成立5~10年','成立10~15年','成立15年以上'],
            //   hyfl:['服务业','制造业','金融业'],
        };
    },
    created() {
        this.queryCity = ''
        if (this.$route.query.qiyeType) {
            var itemObj = this.$route.query
            this.area[4].active = false;
            this.area[4].listIndex = itemObj.queryIndex;
            this.queryParams.qylb = itemObj.qiyeType;
            if (itemObj.city != '重庆') {
                this.queryCity = itemObj.city == '万盛经开区' ? '万盛' : itemObj.city
            }
            // this.getSelectArea();
        } else if (this.$route.query.name == '产业分析') {
            var itemObj = this.$route.query
            this.queryParams.cylb = itemObj.typeValue;
            this.area[3].active = false;
            this.area[3].listIndex = itemObj.typeIndex;
            if (itemObj.cyType) {
                this.queryParams.qylb = itemObj.cyType;
                this.area[4].active = false;
                this.area[4].listIndex = itemObj.cyIndex;
            }
        }
    },
    mounted() {
        this.selectDictCode1(); // 获取区县数据
        //this.selectDictCode2(); // 行业分类
        // this.getSelectArea();
    },
    components: {
        TableBlock: () => import("@/components/table-block")
    },
    methods: {
        // 获取区县数据
        selectDictCode1() {
            getCommonDataSearchCondition("N003")
                .then(res => {
                    if (res.data.code === 200) {
                        this.area.forEach(data => {
                            if (data.key === "qyqx") {
                                data.list = JSON.parse(JSON.stringify(res.data.data.list));
                            }
                        });
                        for (let i = 0; i < this.area[0].list.length; i++) {
                            this.area[0].active = false;
                            let item = this.area[0].list[i]
                            if (item.label == this.queryCity) {
                                this.area[0].listIndex = i;
                                this.queryParams.qyqx = item.value;
                            }
                        }
                        this.getSelectArea();
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        selectDictCode2() {
            getCommonDataSearchCondition("N002")
                .then(res => {
                    if (res.data.code === 200) {
                        this.area.forEach(data => {
                            if (data.key === "qylb") {
                                data.list = res.data.list;
                            }
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 查询当前条件的全部
        queryAllData(item, index) {
            this.queryParams.current = 1;
            this.area[index].active = true;
            this.area[index].listIndex = -1;
            this.active = item.label;
            if (item.key === "qyqx") {
                this.queryParams.qyqx = item.value;
            } else if (item.key === "qylb") {
                this.queryParams.qylb = item.value;
            } else if (item.key === "clzb") {
                this.queryParams.clzb = item.value;
            } else if (item.key === "clsj") {
                this.queryParams.clsj = item.value;
            } else if (item.key === "cylb") {
                this.queryParams.cylb = item.value;
            }
            this.getSelectArea();
        },
        querySubData(item, subItem, index, i) {
            console.log(item, subItem, index, i)
            this.queryParams.current = 1;
            this.area[index].active = false;
            this.area[index].listIndex = i;
            this.active = subItem.label;
            if (item.key === "qyqx") {
                this.queryParams.qyqx = subItem.value;
            } else if (item.key === "qylb") {
                this.queryParams.qylb = subItem.value;
            } else if (item.key === "clzb") {
                this.queryParams.clzb = subItem.value;
            } else if (item.key === "clsj") {
                this.queryParams.clsj = subItem.value;
            } else if (item.key === "cylb") {
                this.queryParams.cylb = subItem.value;
            }
            this.getSelectArea();
        },
        // 项目列表接口
        getSelectArea() {
            /*
            let data = {
              mouhu: "-1",
              qyqx: "-1",
              qylb: "-1",
              clzb: "-1",
              clsj: "-1",
              current: this.currePage,
              size: this.pageSize
            };
            for (var key in params) {
              if (!!params[key]) {
                data[key] = params[key];
              }
            }
            */
            // 事件触发时只用设置全局参数数组就行
            let busiCode = "N001";
            let parms = JSON.parse(JSON.stringify(this.queryParams));
            if (parms.mouhu.trim() === "") {
                parms.mouhu = "-1";
            }
            getCommonDataSearch(busiCode, parms)
                .then(res => {
                    if (res.data.code === 200) {
                        this.oprData = []
                        this.oprData.tableData = res.data.data.tableData;
                        this.oprData.list = res.data.data.list.records;
                        this.total = res.data.data.list.total;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        cellClick(row, column, cell, event) {
            sessionStorage.setItem("companyName", row.row.name);
            this.$router.push({
                path: "/enterprise/tabswich?tabIndex=0&companyId=" + row.row.id
            });
        },
        currentChange(e) {
            this.queryParams.current = e;
            this.getSelectArea();
        },
        searchKey() {
            this.queryParams.current = 1;
            this.getSelectArea();
        }
    }
};
</script>

<style scoped lang="scss">
// color: #03d3ff;
.enterprise-search {
    width: 100%;
    //height: 100%;
    padding: 6vh 1.3vw 4vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // align-items: center;
    .search {
        align-self: center;
        background: rgba(0, 0, 0, 0.3);
        margin-top: 4vh;
        // height: 6vh;
        width: 58.5vw;
        /deep/ .el-input--suffix .el-input__inner {
            // height: 6vh;
            font-size: 26px;
        }
    }
    .condition {
        color: honeydew;
        align-self: center;
        width: 86vw;
        // height: 23vh;
        padding: 1vh 1vw;
        margin-top: 4vh;
        border: 1px solid #0cfcff;
        background: rgba(0, 75, 90, 0.28);
        .area {
            margin-top: 5px;
            display: flex;
            .header {
                color: #0cfcff;
                width: 120px;
                display: flex;
                justify-content: space-between;
                span {
                    padding: 4px;
                }
                .all {
                    color: #fff;
                    cursor: pointer;
                    border: 1px solid transparent;
                    box-sizing: border-box;
                }
                .active {
                    color: #fdd230;
                    border: 1px solid #fdd230;
                }
            }
            // .all{
            //     width: 200px;
            // }
            .box {
                /* height:300px; */
                display: flex;
                flex-wrap: wrap;
            }
            .block {
                margin-left: 20px;
                border: 1px solid transparent;
                padding: 4px;
                color: #fff;
                box-sizing: border-box;
                cursor: pointer;
            }
            .active {
                color: #fdd230;
                border: 1px solid #fdd230;
            }
        }
        .area:nth-child(1) {
            margin-top: 0;
        }
    }
    .total {
        color: honeydew;
        padding: 2.6vh 0;
        span {
            color: #0cfcff;
        }
    }
    .table {
        //   height: 40vh;
        //   overflow-y: auto;
    }
}
</style>
